<template>
    <section>
        <DetailsHeader title="申请开票" class="mb-24" />

        <div class="card">
            <a-form :model="form">
                <a-row :gutter="24">
                    <a-col :span="12" class="item-flex">
                        <a-form-item label="申请开票金额" name="amount" :rules="[{ required: true, message: '请输入申请开票金额' }]"
                            style="flex:1;">
                            <a-input placeholder="请输入申请开票金额" v-model:value="form.amount"></a-input>
                        </a-form-item>
                        <span class="tips"><info-circle-filled style="margin-right: 5px;" />当前可开票金额<span class="col-money">¥{{ accountInfo?.invoiceInfo?.amount }}</span></span>
                    </a-col>

                    <a-col :span="12">
                        <a-form-item label="发票类目" name="category" :rules="[{ required: true, message: '请选择发票类目' }]">
                            <a-select ref="select" v-model:value="form.category" placeholder="请选择发票类目" allowClear>
                                <a-select-option value="云技术服务">云技术服务</a-select-option>
                                <a-select-option value="软件服务费">软件服务费</a-select-option>
                                <a-select-option value="测试服务费">测试服务费</a-select-option>
                                <a-select-option value="测试服务费">技术服务费</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>

            </a-form>
        </div>


        <div class="page-bottom">
            <span class="tips"><info-circle-filled style="margin-right: 5px;" />已开票的充值金额无法提现，仅可储存在账户内操作</span>
            <a-button type="primary" @click="nextStep" style="display:flex;align-item:center;"><svg-icon name="icon_release"
                    style="width:20px;height:20px;margin-right: 8px;color: #ffffff;" /> 下一步</a-button>
        </div>

        <!-- 新增发票地址 -->
        <a-modal v-model:visible="modalVisible" title="申请开票" @ok="handleOk">
            <div>请确认开票信息，一旦开出，不可作废重开</div>
            <a-form class="query-list-form" :model="modalForm">
                <a-form-item label="开票金额">
                    {{ form.amount }}
                </a-form-item>
                <a-form-item label="开票类目">
                    {{ form.category }}
                </a-form-item>
                <a-form-item name="channel" label="发票性质" :rules="[{ required: true, message: '请选择发票类型' }]">
                    <a-radio-group v-model:value="modalForm.channel" name="radioGroup">
                        <a-radio :value="1">电子发票</a-radio>
                        <a-radio :value="2">纸质</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item name="receiptType" label="发票类型" :rules="[{ required: true, message: '请选择发票类型' }]">
                    <a-radio-group v-model:value="modalForm.receiptType" name="radioGroup">
                        <a-radio :value="1">增值税专用发票</a-radio>
                        <a-radio :value="2">增值税普通发票</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="其他需求">
                    <a-input placeholder="请输入其他需求" v-model:value="modalForm.remark"></a-input>
                </a-form-item>

                <a-form-item label="开票信息">
                    <a-select ref="select" v-model:value="modalForm.templateId" allowClear>
                        <a-select-option v-for="item in invoiceList" :value="item.id" :disabled="item.receiptType != modalForm.receiptType">{{ item.title
                        }}</a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item label="邮寄地址" v-if="modalForm.channel == 2">
                    <a-select ref="select" v-model:value="modalForm.addressId" allowClear>
                        <a-select-option v-for="item in addressList" :value="item.id">{{ item.region
                        }}</a-select-option>
                    </a-select>
                </a-form-item>

            </a-form>
        </a-modal>
    </section>
</template>
<script setup>
import { ref } from 'vue'
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import { getInvoiceListApi, getInvoiceAddressListApi, applyInvoiceListApi } from 'api/modules/api.cost'
import {
    InfoCircleFilled,
} from '@ant-design/icons-vue';
import router from '@/router'
import userInfoStore from '@/stores/userInfo.js'
import { XsyMessage } from '@/libs/util.toast'
const accountInfo = ref({})
accountInfo.value = userInfoStore().accountInfo

const form = ref({})
const modalForm = ref({})
const modalVisible = ref(false)
const nextStep = () => {
    modalVisible.value = true
}

const handleOk = () => {
    const params = {
        ...form.value,
        ...modalForm.value
    }
    applyInvoiceListApi(params).then(res => {
        if (res.code == 0) {
            XsyMessage.success('操作成功');
            modalVisible.value = false
            router.push('/invoice')
        }
    })
}

//  请求发票信息列表
const invoiceList = ref([])
const queryParams = ref({
    pn: 1,
    ps: 10
})

const getInvoiceListList = () => {
    getInvoiceListApi(queryParams.value).then(res => {
        invoiceList.value = res.data.list
    })
};

getInvoiceListList()

// 请求发票地址列表
const addressList = ref([])
const getInvoiceAddressList = () => {
    getInvoiceAddressListApi(queryParams.value).then(res => {
        addressList.value = res.data.list
    })
};

getInvoiceAddressList()

</script>


<style lang="less">
.card {
    background: #fff;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0px 4px 4px 0px #E7EDF8;

    .item-flex {
        display: flex;

        .tips {
            color: #223354;
            font-family: PingFang SC;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px;
            margin-left: 16px;
            margin-top: 5px;
        }
    }
}


.page-bottom {
    position: fixed;
    bottom: 0;
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0px 0px 10px 0px rgba(155, 174, 201, 0.40);
    width: calc(100% - 220px);
    min-height: 90px;
    padding: 24px;
    display: flex;
    justify-content: end;
    align-items: center;

    .tips {
        color: #223354;
        font-family: PingFang SC;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-right: 16px;
    }
}
</style>